<template>
  <div>
    <el-card :body-style="{ padding: '0px' }">
      <div slot="header" class="clearfix">
        <tools-btn 
          :toolsData="toolsData" 
          @refresh="refresh" 
          @search="SearchTerm"
          @hasOperation="hasOperation"/>
      </div>
      <table-list :table="table" @handleLook="handleLook" ref="tableList" id="tableExcel">
        <template slot-scope="props" slot="imageUrl">
          <!-- <a
            v-text="props.obj.row.imageUrl=== '' ?'':'查看'"
            style="color:#67C23A;"
            @click="dianji(props.obj.row.imageUrl)"
          />-->
          <el-button
            v-text="props.obj.row.imageUrl=== '' ?'':'查 看'"
            @click="dianji(props.obj.row.imageUrl)"
            size="mini"
            type="text"
          ></el-button>
        </template>
      </table-list>
      <pagination
        :page="PageProp"
        @pageSizeChange="pageSizeChange"
        @pageCurrentChange="pageCurrentChange"
      />
    </el-card>
    <!-- 查看图片 -->
    <el-dialog
      v-if="dialogTableVisible.visible"
      :visible.sync="dialogTableVisible.visible"
      width="30%"
    >
      <div v-for="url in urls" :key="url">
        <img :src="url" style="width:100%;border: 2px solid #DCDFE6;" />
      </div>
    </el-dialog>
    <!-- 查看详情 -->
    <el-dialog v-if="DetailsData !== null" :visible.sync="dialogTableVisible.ViewDetails" title="详情" width="30%">
      <el-form label-width="80px">
        <el-form-item label="设备编号">
          <el-input disabled v-model="DetailsData.id_IMEI" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="企业名称">
          <el-input disabled v-model="DetailsData.person_name" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="企业地址">
          <el-input disabled v-model="DetailsData.address" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="清洗企业">
          <el-input disabled v-model="DetailsData.mname" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="核查时间">
          <el-input disabled v-model="DetailsData.releaseTime" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="核查描述">
          <el-input disabled v-model="DetailsData.content" size="mini" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-image
           v-if="LookImage !== null"
            style="width: 100px; height: 100px"
            :src="LookImage" 
            :preview-src-list="LookImageArr">
          </el-image>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 搜索条件 -->
    <el-dialog
     :visible.sync="dialogTableVisible.SearchBtn"
     title="查询"
     width="30%">
     <el-form label-width="80px">
       <el-form-item label="设备编号">
         <el-input v-model="SearchData.ID_IMEI" size="mini" placeholder="请输入设备编号"></el-input>
       </el-form-item>
     </el-form>
     <el-form label-width="80px">
       <el-form-item label="餐饮企业">
         <el-input v-model="SearchData.person_name" size="mini" placeholder="请输入餐饮企业名称"></el-input>
       </el-form-item>
     </el-form>
     <el-form label-width="80px">
       <el-form-item label="清洗企业">
         <el-input v-model="SearchData.mname" size="mini" placeholder="请输入清洗企业名称"></el-input>
       </el-form-item>
     </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible.SearchBtn = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="UpSeach" size="mini">确 定</el-button>
      </span>
     </el-dialog>
  </div>
</template>

<script>
import ToolsBtn from "../../components/Tools/ToolsBtn";
import TableList from "../../components/Table/TableList";
import pagination from "../../components/Pagination/pagination";
import CheckData from "./CheckData.js";
export default {
  components: {
    ToolsBtn,
    TableList,
    pagination
  },
  data() {
    return {
      toolsData: {
        title: "核查记录",
        oBtnShow: [
          { btn0: false }, // 新增按钮
          { btn1: true }, // 刷新按钮
          { btn2: true }, // 搜索按钮
          { btn3: false }, // 设置按钮
          { btn4: true } // 导出Excel按钮
        ]
      },
      LookImage:null,
      LookImageArr:[],
      table: CheckData.table,
      PageProp: CheckData.pageProps,
      dialogTableVisible: {
        visible: false,
        ViewDetails: false,
        SearchBtn:false,
        data: null
      },
      DetailsData: null,
      imgDialog: {
        visible: false,
        submitVisible: false
      },
      SearchData:{
        ID_IMEI:null,
        person_name:null,
        mname:null
      },
      urls: []
    };
  },
  created() {
    this.GetList(1, 10);
  },
  methods: {
    // 隐藏表格操作列
    hasOperation(){
      this.table.hasOperation = !this.table.hasOperation;
    },
    // 搜索确认
    UpSeach(){
      this.dialogTableVisible.SearchBtn = false
      this.GetList(1, 10);
    },
    // 搜索弹窗
    SearchTerm(){
      this.dialogTableVisible.SearchBtn = true
    },
    // 查看详情
    handleLook(index, row) {
      this.dialogTableVisible.ViewDetails = true;
      this.DetailsData = row
      if (row.imageUrl !== null && row.imageUrl !== "") {
        this.LookImageArr = row.imageUrl.split(",")
        this.LookImage = this.LookImageArr[0]
      }      
    },
    // 查看图片
    dianji(name) {
      this.dialogTableVisible.visible = true;
      this.imgDialog.submitVisible = true;
      var three = name.split(",");
      this.urls = three;
    },
    // 获取表格数据
    GetList(pageNo, pageSize) {
      this.table.data = [];
      this.table.loading = true;
      const params = {
        pageNo,
        pageSize
      };
      this.SearchData.ID_IMEI === null || this.SearchData.ID_IMEI === "" ?null:params.ID_IMEI = this.SearchData.ID_IMEI
      this.SearchData.person_name === null || this.SearchData.person_name === "" ?null:params.person_name = this.SearchData.person_name
      this.SearchData.mname === null || this.SearchData.mname === "" ?null:params.mname = this.SearchData.mname
      this.$api.RECORD.GETCHECKLIST(params)
        .then(res => {
          const data = res.data;
          const total = res.count;
          this.table.data = data;
          this.PageProp.total = total;
          this.table.loading = false;
        })
        .catch(() => {
          this.$message({
            message:'暂无数据',
            type:'warning'
          })
          this.table.data = [];
          this.PageProp.total = 0;
          this.table.loading = false;
          // console.log(err);
        });
    },
    // 刷新数据
    refresh() {
      // console.log("刷新数据")
      this.SearchData.ID_IMEI = null
      this.SearchData.person_name = null
      this.SearchData.mname = null
      this.GetList(1, 10);
    },
    // 分页大小
    pageSizeChange(size) {
      // console.log(`每页 ${size} 条`);
      const tableDataLength = this.table.data.length;
      this.PageProp.pageSize = size;
      if (tableDataLength < this.PageProp.pageSize) {
        this.GetList(1, size);
      } else {
        const pageNo = this.PageProp.currentPage;
        this.GetList(pageNo, size);
      }
    },
    // 翻页
    pageCurrentChange(pageNo) {
      // console.log(`当前页: ${pageNo}`);
      this.PageProp.currentPage = pageNo;
      const size = this.PageProp.pageSize;
      this.GetList(pageNo, size);
    }
  }
};
</script>

<style scoped lang="scss">
</style>